<template>
	<view class="wf-box" :style="{ paddingTop: totalheight }">
		<view class="head" :style="{ paddingTop: navBarHeight }">
			<view class="head-np">
				<view class="back" @click="back()">
				</view>
			</view>
		</view>
		
		<view class="main">
			<image src="../../static/img/sign-02.png" class="banner"></image>
			
			<view class="bar-im">
				<view class="bar-tit">
					<image src="../../static/img/sign-name.png"></image>设置昵称
				</view>
				<view class="bar-num">
					<input type="text" v-model="name" placeholder="请输入您的昵称">
				</view>
			<!-- 	<view class="bar-tip">
					<text>注:</text> 昵称只能是英文奥！
				</view> -->
			</view>
			
			<view class="foot-btn" >
				<view @click="next()" v-if="status == 'no-more'">
					立即体验
				</view>
				<view class="loading" v-else>
					<text>请稍等</text>
					<uni-load-more :status="status" iconSize="18" :showText="false" />
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { throttle } from '@/utils/common.js'
	import navBarMixin from '@/mixin/navBarMixin.js'
	import { psdLoginApi , registerApi} from  '@/api/api.js'
	export default {
		data() {
			return {
				name: '',
				status: 'no-more',
				password: '',
				words: ''
			}
		},
		mixins: [navBarMixin],
		methods: {
			back() {
				uni.navigateBack()
			},
			next() {
				throttle(async() => {
					if(!this.name) {
						uni.showToast({
							title: '请输入昵称',
							icon: 'none'
						})
						return
					}
					
					// 获取设备号
					const { deviceId } = uni.getSystemInfoSync();
					
					this.status = 'loading'
					const res = await registerApi({
						deviceId,
						langueCode: 3,
						nickname: this.name,
						password: this.password,
						words: this.words
					})
					
					if (!res.code) {
						uni.setStorageSync('token', res.data.token)
						uni.setStorageSync('refreshToken', res.data.refreshToken)
						
						uni.setStorageSync('userNo', res.data.userNo)
						
						
						// 调用App.vue的初始化方法
						getApp().init()
						
						uni.showToast({
							title: '注册成功',
							icon: 'none'
						})
						
						setTimeout(() => {
							this.status = 'no-more'
							uni.switchTab({
								// url: '/pages/chat/chat'
								url: '/pages/me/index'
						
							})
						}, 3000)
						
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				},4000)
			},
		},
	
		onLoad(options) {
			// console.log(JSON.parse(options.data))
			// console.log(JSON.parse(options.db))
			this.password = JSON.parse(options.db).psd
			this.words = JSON.parse(options.data).toString()
		}
		
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;
		height: 100vh;
		background: url('../../static/img/sign-01.png') no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		.head {
			position: fixed;
			top: 0;
			z-index: 1;
			width: 100%;
			
			.head-np {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 96rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				.back {
					color: #333;
					font-size: 28rpx;
					image {
						width: 20rpx;
						height: 37rpx;
					}
				}
				
			}
		}
		
		.main {
			padding: 0 30rpx;
			.banner {
				width: 100%;
				margin-top: 80rpx;
			}
			
			
			.bar-im {
				margin-top: 44rpx;
				.bar-tit {
					display: flex;
					align-items: center;
					image {
						margin-right: 20rpx;
						width: 48rpx;
						height: 48rpx;
					}
					text {
						margin-left: auto;
						color: #3F93FF;
					}
					
				}
				.bar-num {
					padding: 0 30rpx;
					height: 80rpx;
					margin-top: 30rpx;
					background: #F8F8F8;
					border-radius: 10rpx;
					input {
						height: 100%;
					}
				}
				.bar-tip {
					margin-top: 20rpx;
					color: #666;
					font-size: 24rpx;
					text {
						color: #FF524C;
					}
				}
			}
			
			.foot-btn {
				margin-top: 110rpx;
				padding: 0 20rpx;
				view {
					line-height: 80rpx;
					background: #3F93FF;
					border-radius: 40rpx;
					text-align: center;
					color: #fff;
				}
				.loading {
					text {
						margin-right: 20rpx;
						color: #fff;
					}
					display: flex;
					justify-content: center;
				}
			}
			.foot-de {
				margin-top: 20rpx;
			}
		}
	}
</style>